<template >
	<div >		
		<div style="margin: 15px;">
      <el-input style="width: 220px;" placeholder="请输入你要查询的角色名称" v-model="UserName"></el-input>
      <el-button type="primary" style="margin: 10px;" @click="getquery">查询</el-button>
      <el-button type="success" @click="openadd"><i class="el-icon-circle-plus-outline"></i> 添加</el-button>
    </div>
		
		<el-table :data="tableData" border style="width: 100%" height="440">
			<el-table-column fixed prop="Id" label="Id" width="50" />
			<el-table-column prop="UserName" label="用户姓名" width="120" />
			<el-table-column prop="LoginName" label="登录" width="150" />
			<el-table-column prop="Sex" label="性别" width="120" />
			<el-table-column prop="Tel" label="电话" width="140" />
			<el-table-column prop="Email" label="邮箱" width="150" />
			
			<el-table-column prop="CreateTime" label="创建时间" width="180" />
			<el-table-column prop="Status" label="状态" width="60" />
			
			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">
					
					<el-button link type="primary" size="small" @click="ShowEdit(scope.row.Id)">编辑</el-button>
					<el-button link type="primary" size="small" @click="Delete(scope.row.Id)">删除</el-button>
					<el-button link type="primary" size="small" @click="auth(scope.row.Id)">授权</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="demo-pagination-block">
			<el-pagination v-model:current-page="PageIndex" v-model:page-size="PageSize" :page-sizes="[5,10, 20, 30, 40]"
				:size="size" :disabled="disabled" :background="background"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
		<el-dialog v-model="dialogAddVisible" title="添加" width="600" draggable>
			<UserAdd @onSave="closeAdd" v-if="dialogAddVisible"></UserAdd>
		</el-dialog>
		<el-dialog v-model="dialogUpdateVisible" title="修改" width="600" draggable>
			<UserUpdate :Id="Id" @onSave="closeUpdate" v-if="dialogUpdateVisible"></UserUpdate>
		</el-dialog>
		<el-dialog title="用户授权" v-model="authVisible" center width="600px">
			<Auth :UserId="UserId" v-if="authVisible" @onSave="closeauth"></Auth>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
	import userapi from "@/api/userapi"
	import UserAdd from "@/Views/User/UserAdd.vue"
	import UserUpdate from "@/Views/User/UserUpdate.vue"
	import Auth from "../User/Auth.vue"
	import { ref, onMounted, reactive } from "vue"
	import type { ComponentSize } from 'element-plus'
	import { ElMessageBox, ElNotification } from 'element-plus'


	const authVisible = ref(false);
	
	const UserId = ref(0)
	const Id = ref(0);
	const UserName=ref("")
	const tableData = ref([])
	const total = ref(0);
	const PageSize = ref(5);
	const PageIndex = ref(1);
	const dialogAddVisible=ref(false);
	const dialogUpdateVisible = ref(false);
	
	const size = ref<ComponentSize>('default')
	const background = ref(false)
	const disabled = ref(false)

	const getdata = (UserName:string="",PageSize:number=5,PageIndex:number=1) => {
		var query = {
			UserName: UserName,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		userapi.query(query).then(res => {
			console.log("usedata=", res);
			tableData.value = res.data
			total.value = res.total;
		}).catch(err => {
			console.log("err=>", err);
		})
	}

	onMounted(() => {
		getdata(UserName.value,PageSize.value,PageIndex.value);
	})

	const openadd=()=>
	{
		dialogAddVisible.value=true;
	}

	const closeAdd=()=>
	{
		dialogAddVisible.value=false;
		PageIndex.value = 1;
		getdata(UserName.value, PageSize.value, PageIndex.value);
	}

	const ShowDetail = (Id : number) => {
		console.log("Id=", Id);
	}
	const ShowEdit = (id : number) => {
		console.log("Id=", id);
		Id.value = id;
		dialogUpdateVisible.value = !dialogUpdateVisible.value
	}
	/**
	 * 授权
	 */
	const auth = (row:any) =>{
		console.log("row=",row)
	    UserId.value = row
	    authVisible.value = !authVisible.value
	}
	
	const closeauth = (flag : boolean) => {
		//关闭弹窗
		authVisible.value = !authVisible.value
		//刷新数据
		PageIndex.value = 1;
		getdata(UserName.value, PageSize.value, PageIndex.value);
	}
	const closeUpdate = (flag : boolean) => {
		//关闭弹窗
		dialogUpdateVisible.value = !dialogUpdateVisible.value
		//刷新数据
		PageIndex.value = 1;
		getdata(UserName.value, PageSize.value, PageIndex.value);
	}

	const getquery=()=>
	{
		console.log(UserName)
		PageIndex.value=1;
		getdata(UserName.value,PageSize.value,PageIndex.value);
	}

	const handleSizeChange = (val: number) => {
	  console.log(`${val} items per page`)
	  PageSize.value=val;
	  PageIndex.value=1;
	 getdata(UserName.value,PageSize.value,PageIndex.value);
	}
	const handleCurrentChange = (val: number) => {
	  console.log(`current page: ${val}`)
	    PageIndex.value=val;
	  getdata(UserName.value,PageSize.value,PageIndex.value);
	}
	const Delete = (Id : number) => {
		console.log("Id=", Id);
		ElMessageBox.confirm("确认删除吗？").then(() => {
			//
			userapi.del({id:Id}).then(res => {
				console.log("res=>", res)
				if (res.code == 1) {
					ElNotification({
						title: 'Success',
						message: '删除成功',
						type: 'success',
						duration: 800,
						onClose: () => {
							//emit("onSave", true)
							getdata(UserName.value, PageSize.value, PageIndex.value);
						}
					})
				} else {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				}
			}).catch(err => {

			})
		}).catch(() => {

		})
	}
</script>

<style>

</style>